/***
 * 先把所有的配置都放在webpack.common.js中，然后拆分到dev和prod中
 *  对于html，需要向html中插入js，替换全局变量，替换模板字符串
 *  对于vue，需要转换为js然后插入到html中
 *
 *  对于public中的内容，在这里只有favicon.ico，没有Index.html。因为html需要被模板编译
 * ****/
const path = require('path')

const HtmlWebpackPlugin = require('html-webpack-plugin')
const webpack = require('webpack')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const VueLoaderPlugin = require('vue-loader/lib/plugin')

module.exports = {
    //配置模式 development\production\none
    mode: "none",
    //配置入口文件
    entry: "./src/main.js",
    //配置输出文件
    output: {
        //文件名
        filename: "bundle.js",
        //拼接路径，必须是绝对路径
        path: path.join(__dirname, 'dist')
    },
    //配置Loader
    module: {
        rules: [
            //对js文件进行处理
            {
                test: /\.js$/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                },
                exclude: /node_modules/
            },
            //虽然没有css文件，但是经过vue-loader处理后的文件会生成css文件，所以还需要css-loader
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, //样式通过Link方式引入
                    // 'style-loader', //样式通过sytle标签注入
                    'css-loader'
                ]
            },
            //对less文件进行处理
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader, //样式通过Link方式引入
                    'css-loader',
                    'less-loader'
                ]
            },
            //对vue文件进行处理
            {
                test: /\.vue/,
                use: 'vue-loader'
            },
            //对jpg，png文件进行处理
            {
                test: /\.(png|jpg|jpeg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        limit: 10 * 1024, //10KB
                        esModule:false //不设置这个属性会产生图片路径都是[object 巴拉巴拉]的bug
                    }
                }
            }
        ]
    },
    //配置Plugin
    plugins: [
        /**
         * 插件有自己的运行时机，所以不需要管插件
         * 在何时运行，只需要使用即可
         * ***/
        //html插件
        //todo 这个插件应该会自动根据模板语法进行编译，具体还不清楚
        new HtmlWebpackPlugin({
            title: __dirname.split('\\').pop(),
            template: "./public/index.html"
        }),
        //注入全局成员
        new webpack.DefinePlugin({
            BASE_URL: JSON.stringify('./')
        }),
        //对于vue-loader来说，必须使用vueloaderplugin
        new VueLoaderPlugin(),
        //将css文件抽离出去
        new MiniCssExtractPlugin({
            filename:'[name]-[contenthash:8].bundle.css'
        })
    ]
}